<template>
  <div class="login-form-wrapper">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" :title="$t('login.form.login.account')">
        <AccountForm @change-login="changeLogin" />
      </a-tab-pane>
      <a-tab-pane key="2" :title="$t('login.form.login.code')">
        <TelForm @change-login="changeLogin" />
      </a-tab-pane>
    </a-tabs>
    <div class="third-login" @click="changeLogin(LoginMethods.ercode)">
      <img class="cccc-image" alt="logo" :src="ccccLogo" />
      <span>{{ $t('login.form.login.JJT') }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import ccccLogo from '@/assets/images/cccc-logo.png';
  import LoginMethods from '../constant';
  import AccountForm from './account-form.vue';
  import TelForm from './tel-form.vue';

  const emit = defineEmits(['changeLogin']);

  const changeLogin = (method: LoginMethods) => {
    emit('changeLogin', method);
  };
</script>

<style lang="less" scoped>
  .login-form {
    &-wrapper {
      width: 369px;
      padding-left: 16px;
    }
  }
  .third-login {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-text-2);
    cursor: pointer;
    margin: 32px auto 0;
    width: 84px;
    &:hover {
      color: rgb(var(--primary-6));
    }
  }
  .cccc-image {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }
</style>
